<script setup lang="ts">
	defineProps<{
		badge ?: string,
		items ?: [],
		soldout ?: boolean,
	}>()

	const emits = defineEmits(['click'])
</script>

<template>
	<view class="list-item" @click="emits('click')" >
		<!-- <view v-if="badge" class="badge">
			{{ badge }}
		</view> -->

		<!-- <image src="/static/owo/prize-box-list-item.png" class="bg" mode="widthFix"></image> -->
		<image src="/static/owo/treasure-box.png" class="treasure-box" mode="widthFix"></image>
		<view class="count">
			<view class="count-col" v-for="(item, index) in items" :key="index">
				<text>{{ item.type }}</text><text>{{ item.stock }}/{{ item.count }}</text>
			</view>
		</view>

		<view v-if="soldout" class="soldout">
			<image src="/static/owo/soldout.png" class="soldout-text-icon" mode="widthFix"></image>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.list-item {
		min-height: 212rpx;
		width: 100%;
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
		background: url("/static/owo/prize-box-list-item.png");
		background-position: 0;
		background-repeat: no-repeat;
		background-size: cover;
		// aspect-ratio: 702/284;

		.bg {
			width: 100%;
			max-height: 228rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 1.5em 1em;
		color: white;
	}

	.treasure-box {
		width: 30%;
	}

	.count {
		display: flex;
		gap: 1em;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
		color: #D9D9D9;
		height: 100%;
		flex-wrap: wrap;
		width: 66%;

		.count-row {
			display: flex;
			gap: 12px;
		}

		.count-col {
			display: flex;
			width: 45%;
			height: 17px;
			color: rgba(255, 255, 255, 0.85);
			justify-content: space-between;
		}
	}

	.badge {
		position: absolute;
		top: 10px;
		left: 0;
		background: linear-gradient(90deg, #FDE29B 0%, #FFFFD0 100%);
		padding: 0 1em;
		height: 22px;
		line-height: 22px;
		vertical-align: middle;
		color: #7A5E15;
		font-size: 10px;
		z-index: 1;
		min-width: fit-content;
	}

	.soldout {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: rgba(0, 0, 0, 0.5);

		.soldout-text-icon {
			width: 72px;
		}
	}
</style>